<template>
    <Search v-if="ban.length" />
    <div class="scroll">
        <div class="page">

            <Banner :ban="ban" />

            <div class="ico">
                <van-image v-for="item in ico" :key="item.sp_home_id" :src="item.sp_home_ico" :default="item.sp_home_title"
                    @click="jump(item)">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                    <p>{{ item.sp_home_title }}</p>
                </van-image>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Search from '@/components/search.vue'
import Banner from './components/banner.vue'
import { getFirstList, type First } from '@/api'
import { ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 轮播图
const ban = ref<First.bannerItem[]>([])
// icon
const ico = ref<First.sortIcon[]>([])

function jump(event: First.sortIcon) {
    const item = event.sp_home_title
    router.push({ name: 'search-list', query: { item }})
}


watchEffect(async () => {
    //下方注释：忽略ts中data 重命名报错
    // @ts-ignore
    const { data: res }: First.myFirst = await getFirstList()
    const [a, b] = res
    ico.value = a as any
    ban.value = b as any
})
</script>
<style lang="scss" scoped>
.scroll {
    padding-bottom: 15px;
    box-sizing: border-box;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    // overflow-y: auto;
}

.ico {
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
}

.van-image {
    width: 64px;
    height: 64px;
    margin: 18px 10px;
}
</style>
  